<script setup lang="ts">
import FullPage from "@/components/Layout/FullPage.vue";
import type { HistoryItemProps } from "@/pages/index/hooks/useHistory";
import useHistoryMessage from "@/pages/index/hooks/useHistory";
import dayjs from "dayjs";
import { onMounted } from "vue";

interface Props {
  showDelete?: boolean;
  list?: HistoryItemProps[];
}
const props = withDefaults(defineProps<Props>(), {
  showDelete: false,
  list: () => []
});
const fomatTime = (time: string) => {
  return dayjs(time).format("YYYY-MM-DD hh:mm:ss");
};

const { record, getHisotryMessage, delHistoryMessage } = useHistoryMessage();

onMounted(getHisotryMessage);

const emit = defineEmits(["showDel", "del", "select"]);
const toIndex = (item: HistoryItemProps) => {
  uni.navigateTo({
    url: `/pages/index/index?id=${item.rb_robot_id}&title=${item.rb_robot.nickname}`
  });
};
</script>

<template>
  <FullPage scroll class="list">
    <view
      class="message"
      v-for="(item, index) in record.list"
      :key="item.id"
      @click="toIndex(item)"
    >
      <view class="title">{{ item.last_msg.question }}</view>
      <Flex justify="space-between">
        <text>{{ item.rb_robot.nickname }}</text>
        <text>{{ fomatTime(item.created_at) }}</text>
      </Flex>
      <view class="del-button" @click.stop="delHistoryMessage(item.id, index)">
        <uv-icon name="trash" size="18px"></uv-icon>
      </view>
    </view>
    <uv-empty
      mode="list"
      v-if="!record.list.length"
      text="暂无历史记录"
    ></uv-empty>
  </FullPage>
</template>

<style lang="scss" scoped>
.del-button {
  position: absolute;
  right: 0;
  top: 0px;
  /* background-color: #ff4848; */
  border-bottom-left-radius: 100%;
  /* padding: 5px; */
}
.header {
  padding-top: 54px;
  width: 100%;
  margin-bottom: 24px;
  .title {
    color: #19191c;
    font-size: 17px;
  }
}
.list {
  .message {
    position: relative;
    box-sizing: border-box;
    padding: 16px;
    /* box-shadow: 0 0 3px 0px rgba($color: #000000, $alpha: 0.3); */
    /* background-color: #f2f4ff; */
    color: #6c6d7b;
    font-size: 12px;
    overflow: hidden;
    border-bottom: 1px solid #f3f4f6;
    .title {
      font-size: 14px;
      margin-bottom: 9px;
      color: #19191c;
      font-weight: 500;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    &:not(:last-child) {
      margin-bottom: 16px;
    }
  }
}
</style>
